<template>
	<view class="">
		<view class="flex my_tabbar flex_col_center">
			<view
				class="sign_tabar"
				v-for="(item, index) in list"
				:key="index"
				@click="urlPage(item.pagePath)"
			>
				<view class="">
					<!-- <text class="custom-icon" :class="'custom-icon-'+item.iconPath" :style="{color:current==index?'#3F826C':'#CCC'}"></text> -->
					<image
						v-if="current == index"
						class="icon"
						:src="app.themeConfig.bottom_tab_icon.length ? app.themeConfig.bottom_tab_icon[0].img_url : item.iconOnPath"
					></image>
					<image v-else class="icon" :src="item.iconPath"></image>
					<text v-if="item.text == '购物车'" class="label">{{ cartTag }}</text>
				</view>

				<text :style="{ color: current == index ? app.themeConfig.text_color2 : '#CCC' }">{{
					item.text
				}}</text>
			</view>
		</view>
		<view class="tabar_height"></view>
	</view>
</template>

<script>
const app = getApp().globalData;
export default {
	props: ["current"],
	data() {
		return {
			app,
			tag: 0,
			list: [
				{
					text: "首页",
					iconPath: "../../static/image/tab0.svg",
					iconOnPath: "../../static/image/tab0_on.svg",
					pagePath: "/pages/tabar/index",
				},
				{
					// iconPath: "fenleitianchong",
					text: "分类",
					pagePath: "/pages/tabar/classify",
					iconPath: "../../static/image/tab1.svg",
					iconOnPath: "../../static/image/tab1_on.svg",
				},
				{
					// iconPath: "gouwu",
					text: "购物车",
					pagePath: "/pages/tabar/shopcart",
					iconPath: "../../static/image/tab2.svg",
					iconOnPath: "../../static/image/tab2_on.svg",
				},
				{
					// iconPath: "mn_dingdan_fill",
					text: "订单",
					pagePath: "/pages/tabar/order",
					iconPath: "../../static/image/tab3.svg",
					iconOnPath: "../../static/image/tab3_on.svg",
				},
				{
					// iconPath: "wode-mianxing",
					text: "我的",
					pagePath: "/pages/tabar/user",
					iconPath: "../../static/image/tab4.svg",
					iconOnPath: "../../static/image/tab4_on.svg",
				},
			],
		};
	},
	computed: {
		cartTag: function () {
			//防止为0判断失误，变为字符串
			var num = this.tag || "" + uni.getStorageSync("cartTag");
			if (num >= 100) {
				num = "99+";
			}
			return num;
		},
	},
	methods: {
		changetag(num = null) {
			//也可能为0，会逃过判断
			if (num != null) {
				uni.setStorageSync("cartTag", num);
				if (num >= 100) {
					this.tag = "99+";
				} else {
					this.tag = "" + num;
				}
			} else {
				this.tag = uni.getStorageSync("cartTag");
			}
		},
		urlPage(data) {
			uni.switchTab({
				url: data,
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.tabar_height {
	height: calc(120rpx + env(safe-area-inset-bottom)) ;
}
.my_tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: $white;
	z-index: 999;
	padding-bottom: 0;
	padding-bottom: env(safe-area-inset-bottom);
	.sign_tabar {
		height: 100rpx;
		justify-content: center;
		display: flex;
		flex-direction: column;
		font-size: 26rpx;
		align-items: center;
		flex-basis: 25%;
	}

	.label {
		position: absolute;
		// margin-top: -5px;
		background: red;
		padding: 0 8rpx;
		// width: 15px;
		// height: 15px;
		// line-height: 15px;
		border-radius: 20rpx;
		text-align: center;
		color: $white;
		font-size: 20rpx;
	}
	.icon {
		width: 44rpx;
		height: 44rpx;
	}
}

// @media (max-width:800px) {
// 	.tabar_height {
// 		height: 50px;
// 	}
// }

// @media (min-width:800px) {
// 	.tabar_height {
// 		height: 80px;
// 	}

// 	.my_tabbar {
// 		width: 600px !important;

// .sign_tabar {
// 	font-size: 20rpx !important;
// 	height: 80rpx !important;

// 	.custom-icon {
// 		font-size: 26rpx;
// 	}

// }

// 	}
// }
</style>
